<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">表彰大会
        <h1>
            一等奖:<span id="one"></span>
        </h1>
        <h3>
            二等奖:<span id="two"></span>
        </h3>
        <h5>
            三等奖:<span id="three"></span>
        </h5>
    </div>

    <div class="box1">
        I am a word
    </div>

    <script>
        const box1 = document.querySelector('.box1');
        console.log(box1.innerText);//获取文字内容
        box1.innerText = '<strong>我是一个盒子</strong>';//修改元素内容，但不解析标签

        console.log(box1.innerHTML);
        box1.innerHTML = '<strong>文段加粗</strong>';
    </script>

    <script>
        const perArr = ['1号', 'no.2', 'no.3'];
        //随机获取数组元素下标
        const random = Math.floor(Math.random() * perArr.length);
        //获取对象
        const one = document.querySelector('.box');
        one.innerHTML = perArr[random];
        perArr.splice(random, 1);
        console.log(perArr);

        const random2 = Math.floor(Math.random() * perArr.length);
        //获取对象
        const two = document.querySelector('.box');
        one.innerHTML = perArr[random2];
        perArr.splice(random2, 1);
        console.log(perArr);

        const random3 = Math.floor(Math.random() * perArr.length);
        //获取对象
        const three = document.querySelector('.box');
        three.innerHTML = perArr[random3];
        perArr.splice(random3, 1);
        console.log(perArr);
    </script>
</body>

</html>